<template>
  <div class="header w">
<!--    logo部分-->
    <div class="logo">
      <img src="@/images/logo.png" alt=""/>
    </div>
<!--    导航模块-->
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">课程</a></li>
        <li><a href="#">职业规划</a></li>
      </ul>
    </div>
<!--    搜索模块-->
    <div class="search">
      <input type="text" placeholder="请输入关键字"/>
      <button></button>
    </div>
<!--    用户模块-->
    <div class="user">
      <img src="@/images/user.png" alt=""/>
      qq-dengli
    </div>
  </div>


</template>
<script setup>

</script>
<style lang="scss" scoped>
.header{
  width: 1200px;
  height: 42px;
  //此地方会层叠
  margin: 30px auto;
  //background-color: pink;
  .logo{
    float: left;
    width: 198px;
    height: 42px;
    //background-color: purple;
  }
  .nav{
    float: left;
    margin-left: 70px;
     ul{
      li{
        float: left;
        margin: 0 15px;
        a{
          display: block;
          padding: 0 10px;
          height: 42px;
          line-height: 42px;
          text-align: center;
          color: black;
          font-size: 18px;
        }
        a:hover{
          border-bottom: 2px solid #00a4ff;
          color: #00a4ff;
        }
      }
    }
  }
  .search{
    float: left;
    width: 412px;
    height: 42px;
    background-color: skyblue;
    margin-left: 50px;
    font-size: 18px;
    input{
      float: left;
      width: 360px;
      height: 42px;
      border: 1px solid #00a4ff;
      //去掉右边框
      border-right: none;
      padding-left: 15px;
      color: #bfbfbf;
      font-size: 14px;
    }
    button{
      float: left;
      width: 50px;
      height: 42px;
      background:url("@/images/btn.png");
      //按钮button默认边框要我们手去掉
      border: 0;
    }
  }
  .user{
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
  }
}

</style>